<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>12周作业</title>
        <style type="text/css">
            body{
                background-image:url(../CSS/图片/背景.jpg);
                background-repeat:repeat ;
                background-size: cover;
                
                opacity: 60%;/*颜色透明度p98*/
            }
            .dg1{
                width: 100%;
                height: 10%;
                background-color: aqua;
                position: relative;
             .all{
                 width: 630px;
                 height: 45px;
                 margin: 50px auto;
                 background-color: #192132;
                 padding-left: 20px;
                 border-bottom: 3px solid #000;
                }
            span{
                 display: inline-block;
                 width: 80px;
                 height: 45px;
                 border-bottom: 3px solid #1ba2c7;
                 }
             .one{background: url(../CSS/图片/1.jpg) no-repeat;}
             .two{background: url(../CSS/图片/2.jpg) no-repeat;}
             .three{background: url(../CSS/图片/3.jpg) no-repeat;}
             .four{background: url(../CSS/图片/4.jpg) no-repeat;}
             .five{background: url(../CSS/图片/5.jpg) no-repeat;}
             .six{background: url(../CSS/图片/6.jpg) no-repeat;}
            }
            .dg2{
                width: 30%;
                height: 40vh;
                position: absolute;
                left:0;
                top: 10vh;
                background-image: linear-gradient(30deg,#0f0 50%,#00f 80%);/*颜色线性渐变p102*/
                background-size: cover;
                background-repeat: no-repeat;
                opacity: 50%;
            }
            .dg3{
                width: 30%;
                height: 40vh;
                background-image: url(../CSS/图片/dg3.jpg);
                block-size: cover;
                background-repeat: no-repeat;
                border: 1px solid black;
                box-shadow: 2px 2px 5px gray;
                position: absolute;
                right: 0;
                top: 10vh;
            }
            .dg2,.dg3{
                display: block;
            }
            .s3{
                display: inline-block;
            }
            .d1.d2.d3{
                width: 30%;
                height: 40vh;
                margin: 10px;
                background-color: white;
                float: left;
            }

            #header.s2{
                width: 30%;
                height: 40vh;
                margin: 10px;
                background-color: lightblue;
                float: left;
            }
            #header.s3{
                width: 30%;
                height: 40vh;
                margin: 10px;
                background-color: lightblue;
                float: left;
            }
            #header.s1{
                width: 30%;
                height: 40vh;
                margin: 10px;
                background-color: lightblue;
                float: left;
            }
            #header.s4{
                width: 30%;
                height: 40vh;
                margin: 10px;
                background-color: lightblue;
                float: left;
            }

        </style>
    </head>
    <body>
        <div class="dg1"><p>dg1<div class="all">
            <span class="one"></span>
            <span class="two"></span>
            <span class="three"></span>
            <span class="four"></span>
            <span class="five"></span>
            <span class="six"></span>
        </div></p></div>
        <div class="dg2"><p><a href="https://www.baidu.com/?tn=15007414_13_dg">dg2</a></p></div>
        <div class="dg3"><p><a href="https://www.baidu.com/?tn=15007414_13_dg">dg3</a></p></div>
        <div class="d1"><p>这是链接<a href="https://www.baidu.com/?tn=15007414_13_dg">d1</a></p></div>
        <span class="s2"><p>s2</p></span>
        <div class="d2"><p>这是链接<a href="https://www.baidu.com/?tn=15007414_13_dg">d2</a></p></div>
        <span class="s3"><p>s3</p></span>
        <div class="d3"><p>这是链接<a href="https://www.baidu.com/?tn=15007414_13_dg">d3</a></p></div>
        <span class="s4"><p>s4</p></span> 
        <span class="s1"><p><a href="https://www.baidu.com/?tn=15007414_13_dg">s1</a></p></span>      
    </body>
</html>